<template>
  <view class="info-wrapper">
    <view class="dev-title" v-if="dev" @tap="devType.open(vdata.devTitle.value)"
      >{{ vdata.devTitle.label }} <image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill"
    /></view>
    <view class="info-title" :class="{ 'fixed-header': fixed }">
      <block v-for="(v, i) in vdata.titleList" :key="i">
        <view class="info-item" :class="{ 'active-title': vdata.selected == v.value }" @tap="selectedTitle(v)">
          {{ v.title }} <view class="stat-sort" :class="[calcClassName(v)]"></view>
        </view>
      </block>
    </view>
    <!-- 默认插槽位置  -->
    <slot />
  </view>
  <JSinglePopup :list="devTypeList" ref="devType" @confirm="confirmType" />
</template>

<script setup>
import { reactive, ref } from 'vue'
const props = defineProps({
  dev: { type: Boolean, default: false }, //是否展示设备类型切换标题
  fixed: { type: Boolean, default: false }, //是否固定头部 默认 false
})
const emits = defineEmits(['device', 'sortClick'])
const vdata = reactive({
  selected: 'payAmount',
  devTitle: {
    label: '全部设备类型',
    value: '',
  },
  titleList: [
    { title: '实收金额', value: 'payAmount', sort: 'ascend' },
    { title: '退款金额', value: 'refundAmount', sort: 'ascend' },
    { title: '成交笔数', value: 'payCount', sort: 'ascend' },
    { title: '成功率', value: 'round', sort: 'ascend' },
  ],
})
const devType = ref(null)
const selectedTitle = (val) => {
  if (vdata.selected != val.value) {
    vdata.selected = val.value
    emits('sortClick', val)
    return
  }
  val.sort = val.sort == 'ascend' ? 'descend' : 'ascend'
  emits('sortClick', val)
}
const devTypeList = reactive([
  { label: '全部设备类型', value: '' },
  { label: '码牌', value: 'qr_code' },
  { label: '扫码POS', value: 'scan_pos' },
  { label: '智能POS', value: 'auto_pos' },
  { label: '收银插件', value: 'cash_plugin' },
])
// 计算需要展示的上下箭头
const calcClassName = (val) => {
  // 判断 选中  与 集合中的 value 值是否相等 不相等 则不添加类名
  if (vdata.selected == val.value) {
    // 返回上箭头 下箭头类名
    return val.sort == 'descend' ? 'asc-sort' : 'des-sort'
  }
  return ''
}
const confirmType = (val) => {
  vdata.devTitle = val
  emits('device', val.value)
}
</script>

<style lang="scss" scoped>
.info-wrapper {
  margin: 0 35rpx 40rpx 35rpx;
  border-radius: $J-b-r32;
  background-color: $J-bg-ff;
  .dev-title {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    height: 100rpx;
    font-size: 30rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #ededed;
    image {
      margin-left: 10rpx;
      width: 40rpx;
      height: 40rpx;
      transform: rotate(180deg);
    }
  }
  .info-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40rpx;
    height: 102rpx;
    font-size: 24rpx;
    color: $J-color-t80;
    background-color: #fff;
    border-bottom: 1rpx solid #ededed;
    .active-title {
      font-weight: 500;
      color: #2980fd;
      border-bottom: 5rpx solid #2980fd;
    }
    .info-item {
      display: flex;
      align-items: center;
      height: 100%;
      .stat-sort {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 10rpx;
        &::before,
        &::after {
          content: '';
          display: block;
          width: 0px;
          height: 0px;
          border: 8rpx solid;
          border-color: #d9d9d9 transparent transparent transparent;
        }
        &::before {
          margin-bottom: 4rpx;
          transform: rotate(180deg);
        }
      }
      .asc-sort::before {
        border-color: #2980fd transparent transparent transparent;
      }
      .des-sort::after {
        border-color: #2980fd transparent transparent transparent;
      }
    }
  }
}
.fixed-header {
  position: sticky;
  top: 112rpx;
  z-index: 10;
  left: 0;
  right: 0;
}
</style>
